<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新的订单</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="common/IncludeTop::header"></div>
<div id="Content">
    <div>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#Catalog").hide().fadeIn();
            });
        </script>
    </div>
    <div id="Catalog">
        <form action = "newOrder" method="post">
            <!--  标题进度条 start-->
            <div class="content" style="margin: 2% 30%;width: 100%;">
                <div class="processBar">
                    <div id="line0" class="bar">
                        <div id="point0" class="c-step c-select"></div>
                    </div>
                    <div class="text" style="margin: 10px -25px;"><span class='poetry1'>Payment Details</span></div>
                </div>
                <div class="processBar">
                    <div id="line1" class="bar">
                        <div id="point1" class="c-step"></div>
                    </div>
                    <div class="text" style="margin: 10px -30px;"><span class='poetry2'>Billing Address</span></div>
                </div>
                <div class="processBar">
                    <div id="line2" class="bar" style="width: 0;">
                        <div id="point2" class="c-step"></div>
                    </div>
                    <div class="text" style="margin: 10px -30px;"><span class='poetry3'>Shipping Address</span></div>
                </div>
            </div>
            <!--  标题进度条 end-->

            <div style="clear: both;"></div>
            <div id="MainContent" style="margin: 2% 30%;">
                <div class="content" id="basicInfo">
                    <table>
                        <tr>
                            <th colspan=2>Payment Details</th>
                        </tr>
                        <tr>
                            <td>Card Type:</td>
                            <td><select name="cardType">
                                <option selected="selected" value="Visa">Visa</option>
                                <option value="MasterCard">MasterCard</option>
                                <option value="American Express">American Express</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td>Card Number:</td>
                            <td><input type = "text" name = "creditCard" th:value="${session.order.creditCard}"/></td>
                        </tr>
                        <tr>
                            <td>Expiry Date (MM/YYYY):</td>
                            <td><input type = "text" name = "expiryDate" th:value="${session.order.expiryDate}"/></td>
                        </tr>
                    </table>
                </div>
                <div class="content" id="education">
                    <table>
                        <tr>
                            <th colspan=2>Billing Address</th>
                        </tr>
                        <tr>
                            <td>First name:</td>
                            <td><input type = "text" name = "billToFirstName" th:value="${session.account.firstName}"/></td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td><input type = "text" name = "billToLastName" th:value="${session.account.lastName}"/></td>

                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td><input type = "text" name = "billAddress1" th:value="${session.account.address1}"/></td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td><input type = "text" name = "billAddress2" th:value="${session.account.address2}"/></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td><input type = "text" name = "billCity" th:value="${session.account.city}"/></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td><input type = "text" name = "billState" th:value="${session.account.state}"/></td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td><input type = "text" name = "billZip" th:value="${session.account.zip}"/></td>

                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td><input type = "text" name = "billCountry" th:value="${session.account.country}"/></td>

                        </tr>
                    </table>
                </div>
                <div class="content" id="work">
                    <table>
                        <tr>
                            <th colspan=2>Shipping Address</th>
                        </tr>

                        <tr>
                            <td>First name:</td>
                            <td><input type = "text" name = "shipToFirstName" th:value="${session.account.firstName}"/></td>
                        </tr>
                        <tr>
                            <td>Last name:</td>
                            <td><input type = "text" name = "shipToLastName" th:value="${session.account.lastName}"/></td>

                        </tr>
                        <tr>
                            <td>Address 1:</td>
                            <td><input type = "text" name = "shipAddress1" th:value="${session.account.address1}"/></td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td><input type = "text" name = "shipAddress2" th:value="${session.account.address2}"/></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td><input type = "text" name = "shipCity" th:value="${session.account.city}"/></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td><input type = "text" name = "shipState" th:value="${session.account.state}"/></td>
                        </tr>
                        <tr>
                            <td>Zip:</td>
                            <td><input type = "text" name = "shipZip" th:value="${session.account.zip}"/></td>

                        </tr>
                        <tr>
                            <td>Country:</td>
                            <td><input type = "text" name = "shipCountry" th:value="${session.account.country}"/></td>
                        </tr>

                    </table>
                </div>

            </div>
            <div style="clear: both;"></div>
            <div style="text-align: center;">
                <button type="button" id="previous_step">BACK</button>
                <button type="button" id="next_step">NEXT</button>
                <button id="finish">FINISH</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../js/index.js"> </script>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>